$--color-primary: $red;
$--font-path: '~element-plus/lib/theme-chalk/fonts';

@import '~element-plus/packages/theme-chalk/src/common/transition';
@import '~element-plus/packages/theme-chalk/src/popover';
@import '~element-plus/packages/theme-chalk/src/pagination'; // Popover 组件显示「箭头」需要引入此样式
@import '~element-plus/packages/theme-chalk/src/dialog';
@import '~element-plus/packages/theme-chalk/src/divider';
@import '~element-plus/packages/theme-chalk/src/button';
@import '~element-plus/packages/theme-chalk/src/input';
@import '~element-plus/packages/theme-chalk/src/image';
@import '~element-plus/packages/theme-chalk/src/icon';
@import '~element-plus/packages/theme-chalk/src/tabs';
@import '~element-plus/packages/theme-chalk/src/table';
@import '~element-plus/packages/theme-chalk/src/table-column';
@import '~element-plus/packages/theme-chalk/src/slider';

.el-popover {
  padding: 8px !important;
  width: auto !important;
  border-radius: $radius_2 !important;
  @include themeify {
    color: Color(--font-color_primary);
    background-color: Color(--bg-color_main);
    border-color: Color(--border-color_00);
  }

  .el-popper__arrow {
    &:before {
      @include themeify {
        background-color: Color(--bg-color_main);
        border-color: Color(--border-color_00);
      }
    }
  }
}

.el-divider {
  @include themeify {
    background-color: Color(--border-color_00);
  }
}

.el-overlay {
  backdrop-filter: blur(15px);
  @include themeify {
    background-color: Color(--bg-color_blur_overlay);
  }
}

.el-dialog {
  border-radius: $radius_3;
  @include themeify {
    background-color: Color(--bg-color_main);
  }
}

.el-input {
  .el-input__inner {
    background-color: transparent;
    @include themeify {
      color: Color(--font-color_primary);
      border-color: Color(--border-color_00);
    }

    &:focus {
      border-color: $red;
    }

    &::-webkit-input-placeholder {
      color: $gray;
    }

    &::-moz-placeholder {
      color: $gray;
    }

    &::-ms-input-placeholder {
      color: $gray;
    }
  }

  .el-input__prefix,
  .el-input__suffix {
    @include themeify {
      color: Color(--font-color_primary) !important;
    }
  }
}

.el-pagination {
  text-align: center;

  .el-pager li,
  .btn-prev,
  .btn-next {
    @include themeify {
      color: Color(--font-color_primary);
      background-color: Color(--border-color_00);
    }
  }
}
